<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>用户信息管理</span>
        <el-button class="button" type="primary" @click="btnAddDialog"> 添加</el-button>
      </div>
    </template>
    <!-- 查询 -->
    <el-form :inline="true" :model="frmQuery" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="frmQuery.user_name" placeholder="请输入用户名" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getuserName">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="picture" label="头像" width="120">
        <template #default="scope">
          <el-image
      style="width: 70px; height: 70px"
      :src="'http://localhost:8080/images/upload/'+scope.row.picture"     
    />
        </template>
      </el-table-column>
      <el-table-column prop="user_uid" label="uid" width="150" />
      <el-table-column prop="user_name" label="姓名" width="150" />
      <el-table-column prop="user_sex" label="性别" width="120">
        <template #default="scope">
          {{ scope.row.user_sex ? "男" : "女" }}
        </template>
      </el-table-column>
      <el-table-column prop="user_email" label="邮箱" width="120" />
      <el-table-column prop="user_phone" label="电话" width="120" />
      <el-table-column prop="user_grade" label="心理测试成绩" width="120" />
      <el-table-column fixed="right" label="操作" width="160">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="detailDialog(scope.row.user_uid)">详情</el-button>
          <el-button link type="primary" size="small" @click="updateDialog(scope.row.user_uid)">编辑</el-button>
          <el-popconfirm confirm-button-text="是" cancel-button-text="否" :icon="InfoFilled" icon-color="#626AEF"
            title="Are you sure to delete this?" @confirm="deleteClick(scope.row.user_uid)">
            <template #reference>
              <el-button link type="warning" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <!-- 分页 -->
    <el-pagination 
    :currentPage="currentPage" 
    :page-size="pageSize" 
    :page-sizes="[5, 10, 20, 30, 40]" 
    :background="true"
    layout="total, sizes, prev, pager, next, jumper" 
    :total="pageInfo.total" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />
  </el-card>
  <!-- 详情对话框 -->
  <el-dialog v-model="detailDialogVisible" title="查看用户信息" width="60%">
    <el-descriptions :column="5" border title="用户信息">
      <el-descriptions-item prop="picture" label="头像" width="120">
        <template #default="scope">
          <el-image
      style="width: 70px; height: 70px"
      :src="'http://localhost:8080/images/upload/'+user.picture"     
    />
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="用户名">{{ user.user_name }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ user.user_sex ? "男" : "女" }}</el-descriptions-item>
      <el-descriptions-item label="联系方式">{{ user.user_phone }}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{ user.user_email }}</el-descriptions-item>
      <el-descriptions-item label="心理成绩">{{ user.user_grade }}</el-descriptions-item>
    </el-descriptions>

  </el-dialog>
  <!-- 添加对话框 -->
  <el-dialog v-model="dialogFormVisible" title="添加用户信息">
    <el-form :model="form">
            <!-- 图片添加 -->
            <el-col :span="8"
        ><div class="grid-content ep-bg-purple" />
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/user/upload"
          :show-file-list="false"
          :on-success="handleSuccess"
        >
          <img v-if="form.picture" :src="'http://localhost:8080/images/upload/'+form.picture" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-col>
      <el-form-item label="用户名" :label-width="formLabelWidth">
        <el-input v-model="form.user_name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="form.user_password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-radio v-model="form.user_sex" label="1">男</el-radio>
        <el-radio v-model="form.user_sex" label="0">女</el-radio>
      </el-form-item>
      <el-form-item label="心理测试成绩" :label-width="formLabelWidth">
        <el-input v-model="form.user_grade" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" :label-width="formLabelWidth">
        <el-input v-model="form.user_email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="联系方式" :label-width="formLabelWidth">
        <el-input v-model="form.user_phone" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addUser">
          添加
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 修改对话框 -->
  <el-dialog v-model="updateDialogVisible" title="修改用户信息">
    <el-form :model="form">
      <el-form :model="form">
                      <!-- 修改图片 -->
                      <el-col :span="8"
        ><div class="grid-content ep-bg-purple" />
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/user/upload"
          :show-file-list="false"
          :on-success="handleSuccess"
        >
          <img v-if="form.picture" :src="'http://localhost:8080/images/upload/'+form.picture" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-col>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.user_name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.user_password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio v-model="form.user_sex" label="1">男</el-radio>
          <el-radio v-model="form.user_sex" label="0">女</el-radio>
        </el-form-item>
        <el-form-item label="心理测试成绩" :label-width="formLabelWidth">
          <el-input v-model="form.user_grade" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.user_email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="form.user_phone" autocomplete="off" />
        </el-form-item>
      </el-form>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updateUser">修改</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ElMessage } from 'element-plus'
import { Plus } from "@element-plus/icons-vue"; //图片上传plus
export default {
  components: {  Plus },
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      pageInfo: {},
      tableData: [],
      frmQuery: {
        user_uid: "",
        user_name: ""
      },
      formLabelWidth: "140px",
      form: {},
      dialogFormVisible: false,    //添加对话框 
      detailDialogVisible: false,  //详情对话框
      updateDialogVisible: false,  //修改对话框
      user: {},
    }
  },
  created() {
  },
  mounted() {
    this.LoadData()       // 加载用户信息
    this.getData(1, 5) //分页
  },
  methods: {
    handleSuccess(response) {
      console.log(response);
      //this.imageUrl ="http://localhost:8080/images/upload/"+ response; //图片上传成功的回流函数
      this.form.picture =  response;
    },
    // 分页
    getData(num, size) {
      this.$http.get("http://localhost:8080/user/page", {
        params: {
          pageNum: num,
          pageSize: size,
        },
      }
      ).then((response) => {
        this.pageInfo = response.data
        this.tableData = this.pageInfo.list
      }).catch((err) => {
        console.log(err);
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getData(this.currentPage, this.pageSize)
      console.log("size", pageSize)

    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.getData(this.currentPage, this.pageSize)
      console.log("num", pageNum)

    },
    LoadData() {         // 加载用户信息数据 
      this.$http.get("http://localhost:8080/user/list", this.frmQuery).then((res) => {
        this.tableData = res.data
        console.log(res.data);
      }).catch((err) => {
        console.log(err);
      })
    },
    updateUser() {
      this.form.user_sex = Number(this.form.user_sex)
      console.log(this.form);
      this.$http.post("http://localhost:8080/user/update", this.form).then((res) => {
        console.log(res.data);
        if (res.data == 1) {
          console.log("修改成功！");
          this.form = {}     // 清空表单对象
          this.updateDialogVisible = false;    // 关闭修改对话框
          this.LoadData()    // 重新加载数据
          ElMessage({
            message: '修改成功！',
            type: 'success',
          })
        } else {
          console.log("修改失败！");
          ElMessage({
            message: '修改失败！',
            type: 'warning',
          })
        }
      }).catch((err) => {

      })
    },
    updateDialog(user_uid) {      // 编辑操作
      console.log(user_uid);
      this.$http.get("http://localhost:8080/user/get/" + user_uid).then((res) => {
        console.log(res.data);
        this.form = res.data
        this.form.stu_sex = this.form.user_name ? "1" : "0"
      }).catch((err) => {

      })
      this.updateDialogVisible = true
    },
    addUser() {
      console.log(this.form);
      this.form.user_sex = Number(this.form.user_sex)
      this.$http.post("http://localhost:8080/user/add", this.form).then((res) => {
        console.log(res.data);
        if (res.data == 1) {
          console.log("添加成功！");
          this.form = {}
          this.dialogFormVisible = false;
          this.LoadData()
          ElMessage({
            message: '添加成功！',
            type: 'success',
          })
        } else {
          console.log("添加失败！");
          ElMessage({
            message: '添加失败！',
            type: 'warning',
          })
        }
      }).catch((err) => {

      })
    },
    deleteClick(user_uid) {      // 删除操作
      console.log(user_uid);
      this.$http.get("http://localhost:8080/user/del/" + user_uid).then((res) => {
        console.log(res.data);
        if (res.data == 1) {
          console.log("删除成功！");
          this.LoadData()
          ElMessage({
            message: '删除成功！',
            type: 'success',
          })
        } else {
          console.log("删除失败！");
          ElMessage({
            message: '删除失败！',
            type: 'warning',
          })
        }
      }).catch((err) => {

      })
    },
    detailDialog(user_uid) {     // 详情操作
      console.log(user_uid);
      this.$http.get("http://localhost:8080/user/get/" + user_uid).then((res) => {
        console.log(res.data);
        this.user = res.data
      }).catch((err) => {

      })
      this.detailDialogVisible = true
    },
    getuserName() {//查询
      console.log(this.frmQuery.user_name);
      this.$http.get("http://localhost:8080/user/query/" + this.frmQuery.user_name).then((res) => {
        this.tableData = res.data
        console.log(res.data);
      }).catch((err) => {
        console.log(err);/////
      })
    },
    btnAddDialog() {
      this.dialogFormVisible = true
    }
  }
}
</script>
  
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}
</style>